<template>
  <div id="Shenghuohui">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-bottom:20px;font-size:16px;float:left;line-height:200%">
      <el-breadcrumb-item :to="{ name: 'recruit' }">公开招聘</el-breadcrumb-item>
      <el-breadcrumb-item>项目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button style="float:right; margin-left:20px;" :disabled="!canExport" type="primary" size="small" @click.native="exportexcel" :loading="exportloading">导出民主生活会评估表</el-button>
    <section>
      <div style="clear:both"></div>
      <el-radio-group v-model="Zhuangtai" @change="getDept">
        <el-radio-button label="正在办理业务"></el-radio-button>
        <el-radio-button label="相关业务"></el-radio-button>
      </el-radio-group>
      <el-table :data="deptlist" highlight-current-row v-loading="listLoading" style="width: 100%;min-width:1000px;" :row-class-name="tableRowClassName" @sort-change='sortChange'>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="TheYear" label="年度" width="70">
        </el-table-column>
        <el-table-column prop="Name" label="单位名称" sortable="custom">
        </el-table-column>
        <el-table-column prop="Dangqianrenyuan" label="当前人员" width="80">
        </el-table-column>
        <el-table-column prop="HuiyiUpload" label="会议数据" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.HuiyiUpload === '未上传'" style="color:red">{{scope.row.HuiyiUpload}}</span>
            <span v-else>{{scope.row.HuiyiUpload}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Dangqianzhuangtai" label="阶段" width="200">
        </el-table-column>
        <el-table-column label="进度" width="200" prop="Jindu" sortable="custom">
          <template slot-scope="scope">
            <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.Jindu" :status="progressstyle(scope.row.Jindu)" slot="reference"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <span ref="EditBtns" style="margin:0 10px 0 0">
              <el-button size="small"  @click="unitshow(scope.row.Id,scope.row.TheYear)" type="primary">详情</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--新增界面-->
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      deptlist: [],
      listLoading: false,
      totalnum: 0,
      startBtnsVisible: false,
      startLoading: false,
      Sortkey: '',
      Isace: true,
      shenghuohuiName: '',
      Zhuangtai: '正在办理业务',
      exportloading: false,
      canExport: false
    }
  },
  methods: {
    progressstyle: (progress) => {
      return progress === 100 ? 'success' : null
    },
    unitshow: function (id, TheYear) {
      console.log('TheYear:' + TheYear)
      if (TheYear === 2018) {
        this.$router.push({name: `shenghuohuiUnit2018`, params: {id: id}})
      } else if (TheYear === 2019) {
        this.$router.push({name: `shenghuohuiUnit2019`, params: {id: id}})
      } else if (TheYear >= 2020) {
        this.$router.push({name: `shenghuohuiUnit2020`, params: {id: id}})
      }
    },
    tableRowClassName (val) {
      if (val.row.Zhuangtai === '未接收') {
        return 'row-b'
      } else {
        return ''
      }
    },
    sortChange: function (column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = true
      } else {
        this.Isace = false
      }
      this.getDept()
    },
    // 获取列表
    getDept () {
      this.startBtnsVisible = false
      var _this = this
      this.listLoading = true
      let para = {
        id: 0,
        Zhuangtai: this.Zhuangtai,
        Sortkey: this.Sortkey,
        Isace: this.Isace
      }
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .post(`/shenghuohui/getallunit`, para)
        .then(function (response) {
          _this.listLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.deptlist = response.data.Result
            _this.canExport = _this.deptlist.filter(item => item.HuiyiUpload === '已上传').length > 0
            _this.shenghuohuiName = response.data.Msg
            if (response.data.CanCreate === true) {
              _this.startBtnsVisible = true
            }
            console.log('获取总数:' + response.data.Msg)
            console.log('获取size:' + _this.pagenum)
            _this.totalnum = parseInt(response.data.Msg)
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    exportexcel: function () {
      this.exportloading = true
      let para = {
        id: null
      }
      var _this = this
      this.$http.post(`/shenghuohui/download`, para, {responseType: 'blob'}).then(function (response) {
        if (response.data.IsSuccess === false) {
          _this.$message({
            message: '导出失败1:' + response.data.Msg,
            type: 'error'
          })
          _this.exportloading = false
        } else {
          let filename = '民主生活会评估表.zip'
          _this.MyDownloadfile(response.data, filename, 'zip')
          _this.exportloading = false
        }
      }).catch(function (error) {
        console.log(error)
        _this.$message({
          message: '导出失败2:' + error,
          type: 'error'
        })
        _this.exportloading = false
      })
    }
  },
  mounted () {
    console.log('状态：' + this.$route.params.zhuangtai)
    if (this.$route.params.zhuangtai !== undefined) {
      this.Zhuangtai = this.$route.params.zhuangtai
    }
    this.getDept()
  }
}
</script>
<style scoped>
#Shenghuohui{
  padding: 20px
}
</style>
<style>
.el-table .row-b{
  font-weight:bolder
}
</style>
